<template>
  <div class="article">
    <el-dialog
      :title="title + '文章'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      fullscreen
      @closed="resetForm('form')"
    >
      <span slot="title">
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="2">
            <span>{{ title + '文章' }}</span>
          </el-col>
          <el-col :span="4">
            <div class="handle-btn">
              <el-button
                type="success"
                v-preventReClick
                @click="handlePreview()"
                size="mini"
                >预 览</el-button
              >
              <el-button
                type="primary"
                v-preventReClick
                @click="submitForm('form', 1)"
                size="mini"
                >暂 存</el-button
              >
              <el-button
                type="custom"
                v-preventReClick
                @click="submitForm('form', 0)"
                size="mini"
                >发 布</el-button
              >
            </div>
          </el-col>
        </el-row>
      </span>
      <div class="webheart article-wrap">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
          size="small"
        >
          <el-card class="box-card article-info">
            <el-row :gutter="20">
              <el-col :span="20">
                <div class="article-basic">
                  <el-col :span="18">
                    <el-form-item label="文章标题" prop="title">
                      <el-input v-model.trim="form.title" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-checkbox-group v-model="titleArr">
                      <el-checkbox label="1">引题</el-checkbox>
                      <el-checkbox label="2">副标题</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col :span="18" v-show="titleArr.indexOf('1') != -1">
                    <el-form-item label="引题">
                      <el-input
                        v-model.trim="form.citeTitle"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="18" v-show="titleArr.indexOf('2') != -1">
                    <el-form-item label="副标题">
                      <el-input
                        v-model.trim="form.subTitle"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <div style="clear: both"></div>
                  <el-col :span="6">
                    <el-form-item label="作者" prop="author">
                      <el-input v-model.trim="form.author" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="来源">
                      <el-input v-model.trim="form.source" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="发布时间" prop="pubDate">
                      <el-date-picker
                        v-model="form.pubDate"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择发布时间"
                        :clearable="false"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="排序">
                      <el-input-number
                        v-model="form.orderBy"
                        :min="1"
                        :max="1000"
                        size="small"
                        label="排序"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                </div>
                <div class="article-more-content">
                  <el-col :span="6">
                    <el-form-item label="编辑">
                      <el-input v-model.trim="form.editor" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="审核">
                      <el-input
                        v-model.trim="form.auditor"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="摄影">
                      <el-input
                        v-model.trim="form.photography"
                        clearable
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="点击数">
                      <el-input-number
                        v-model="form.clickCount"
                        :min="0"
                        :max="999999"
                        size="small"
                        label="点击数"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="摘要" clearable>
                      <el-input
                        type="textarea"
                        :rows="4"
                        v-model.trim="form.outline"
                        maxlength="200"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-checkbox
                      v-model="drawOutline"
                      @change="handleDrawOutline"
                      >自动提取</el-checkbox
                    >
                  </el-col>
                  <el-col :span="18">
                    <el-form-item label="附件">
                      <UploadFile
                        multiple
                        @e-fileData="saveFile"
                        :defaultValue="fileList"
                      />
                    </el-form-item>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="4" class="cover-wrap">
                <ImgCropper
                  ref="ImgCropper"
                  :defaultValue="tbSysAttachment"
                  @e-emit="setCoverImgId"
                  @fatherMethod="fatherMethod"
                />
              </el-col>
            </el-row>
          </el-card>

          <el-card style="margin-top: 10px">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="资源类型" prop="newsType">
                  <el-radio-group v-model="form.newsType">
                    <el-radio label="1">文章</el-radio>
                    <el-radio label="2">外链</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24" v-if="form.newsType == 1">
                <el-form-item label="正文" prop="content">
                  <UEditor
                    ref="ueditor"
                    :ueHeight="500"
                    :ueWidth="1275"
                    :defaultMsg="form.content"
                    :clear="dialogVisible"
                  />
                </el-form-item>
              </el-col>
              <div v-else>
                <el-col :span="18">
                  <el-form-item label="外链地址" prop="linkAddr">
                    <el-input v-model.trim="form.linkAddr" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <p class="txt-explain">链接地址必须以http://或https://开头</p>
                </el-col>
              </div>
            </el-row>
          </el-card>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import userInfo from '@/mixins/userInfo.js'
export default {
  mixins: [userInfo],
  components: {
    ImgCropper: () => import('@/components/imgCropper'),
    UploadFile: () => import('@/components/uploadFile/index.vue'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      titleArr: [],
      articleMore: true,
      drawOutline: false,
      form: {
        title: '', //标题
        subTitle: '', //副标题
        citeTitle: '', //副标题
        status: '1', //状态0-发布，1-未发布
        author: '', //作者
        editor: '', //编辑
        photography: '', //摄影
        auditor: '', //审核
        executiveEditor: '', //责编
        clickCount: '0', //点击数
        content: '', //内容
        source: '', //来源
        pubDate: '', //发布时间
        outline: '', //概要
        fileIds: [], //附件id数组
        orderBy: 10,
        coverPicture: '', //封面图
        newsType: '1', //1.文章 2.外链
        linkAddr: '', //外链地址
        classifyIds: [],
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        pubDate: [
          { required: true, message: '请选择发布时间', trigger: 'change' },
        ],
        newsType: [
          { required: true, message: '请选择资源类型', trigger: 'blur' },
        ],
        content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
        linkAddr: [
          { required: true, message: '请输入外链地址', trigger: 'blur' },
        ],
      },
      fileList: [], //返回附件信息
      tbSysAttachment: null, //返回封面图信息
    }
  },
  props: ['classifyId'],
  mounted() {
    this.$bus.$on('showDialogNewsContentsAdd', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogNewsContentsAdd')
  },
  methods: {
    //显示弹窗
    init(row) {
      this.titleArr = []
      this.tbSysAttachment = null
      this.fileList = []
      this.form = this.$options.data().form
      if (row) {
        this.form = { ...this.form, ...row }
        this.$set(this.form, 'id', row.id)
        this.titleArr = [
          this.form.subTitle ? '1' : '',
          this.form.outline ? '2' : '',
        ]
        this.form.pubDate = moment(this.form.pubDate).format(
          'YYYY-MM-DD HH:mm:ss',
        )
        this.form.content = this.form.content.replace('div', 'p')
        this.tbSysAttachment = row.tbSysAttachment || null
        this.fileList = row.fileList || []
      } else {
        this.form.author = this.username
        this.form.pubDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        this.$delete(this.form, 'id')
      }
      this.title = row ? '编辑' : '新增'
      this.dialogVisible = true
    },
    submitForm(form, status) {
      this.form.classifyIds = [this.classifyId]
      this.form.status = status
      this.form.subTitle =
        this.titleArr.indexOf('1') != -1 ? this.form.subTitle : ''
      this.form.outline =
        this.titleArr.indexOf('2') != -1 ? this.form.outline : ''
      this.form.pubDate = moment(this.form.pubDate).format(
        'YYYY-MM-DD HH:mm:ss',
      )
      if (this.form.newsType == 1) {
        this.form.linkAddr = ''
        this.form.content = this.$refs.ueditor.message
      } else {
        this.form.content = ''
      }
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let dispatchType =
            this.title == '新增' ? 'addNewsContents' : 'updateNewsContents'
          await this.$store.dispatch(dispatchType, this.form)
          this.done()
        }
      })
    },
    done() {
      this.dialogVisible = false
      this.$bus.$emit('refreshNewsContentsList')
      this.$message({
        message: '操作成功',
        type: 'success',
      })
    },
    resetForm(form) {
      this.$refs[form].resetFields()
    },
    saveFile(v) {
      this.form.fileIds = []
      this.form.fileIds = v.map((item) => item.id)
    },
    setCoverImgId(v) {
      this.form.coverPicture = v.id
    },
    //提取摘要
    handleDrawOutline(v) {
      if (v) {
        let str = this.$refs.ueditor.message
        this.form.outline = this.removeHtmlTab(str).slice(0, 200)
      } else {
        this.form.outline = ''
      }
    },
    //获取正文
    fatherMethod() {
      let content = this.$refs.ueditor.message
      this.$refs.ImgCropper.getContent(content)
    },
    //预览
    handlePreview() {
      if (this.form.newsType == 1) {
        this.form.content = this.$refs.ueditor.message
        if (!this.form.title || !this.form.content) {
          this.warnMsg('标题和正文不能为空')
          return
        }
        this.$bus.$emit('collectLogPreview', this.form)
      } else {
        let urlReg =
          /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
        if (urlReg.test(this.form.linkAddr)) {
          window.open(this.form.linkAddr)
        } else {
          this.warnMsg('请输入正确的网站地址')
        }
      }
    },
  },
}
</script>
<style scoped lang="scss">
.article-info {
  position: relative;
  .article-more-btn {
    position: absolute;
    right: -27px;
    bottom: -27px;
    cursor: pointer;
    width: 100px;
    height: 60px;
    background: #1a9c03;
    color: #fff;
    text-align: center;
    transform: rotate(-35deg);
  }
  .cover-wrap {
    position: relative;
  }
  .article-more-content {
    clear: both;
  }
}
</style>
<style scoped>
.article >>> .el-dialog {
  background: #aaa;
}
.article >>> .el-dialog__header {
  padding: 10px 20px;
  background: #fff;
}
.article >>> .el-dialog__header .el-dialog__headerbtn {
  top: 14px;
  padding: 4px 5px;
  border-radius: 3px;
  background: #930b0b;
}
.article >>> .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.article >>> .el-dialog__body {
  border-top: 1px solid #ddd;
}
.cover-wrap >>> .cover-img {
  right: 50px;
}
</style>